@charset "UTF-8";

/*css reset*/
* {margin:0;padding:0; border:0; word-break:break-all; font-family:"微软雅黑",'Microsoft YaHei','华文黑体','STHeiti','宋体',helvetica, arial, verdana, sans-serif; font-size: 12px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0 none;}
address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul,li {list-style-type:none;}
li{display:block;}
capation,th{text-align:left;}
abbr,acronym{border:0;}
select,input,img{vertical-align:middle; }
a {text-decoration: none; font-weight:normal; cursor:pointer;}
b{ font-weight:bold; display:inline;}
input{height:auto; outline:none; vertical-align:bottom;+vertical-align:middle !important; _vertical-align:middle; line-height:normal}
textarea {resize: none;} /*6月14日更新，针对webkit核心的浏览器——Chrome(google浏览器),Safari(苹果浏览器)中textare可调整大小的问题定义. 取消拖动调整大小*/
textarea:focus {outline: none;} /*6月14日更新. textarea的聚焦时现在默认边框颜色不变*/
i, em, cite { font-style: normal; }

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*定位*/
.clear,.clearit{clear: both;margin: 0;padding: 0;}
.clearFix {display: block;}
.clearFix:after {clear: both;content: ".";display: block;height: 0;visibility: hidden;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.alc{text-align:center;}
.all{text-align:left;}
.alr{text-align:right;}
.vm{vertical-align:middle;}
.zoom{zoom:1}
.ct,.center{ margin:0px auto;}

.media .bd { vertical-align: baseline; display: table-cell; width: 10000px; *width: auto; *zoom: 1; }
.media .bd > :first-child { margin-top: 0; }
.media .bd > :last-child { margin-bottom: 0; }
.media .img { float: left; }
.media .img img { display: block; }
.media .bd img { display: block; }
.media .imgext { float: right; /*margin-left: 10px; */ }
.media .imgext img { display: block; }

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { content: "\20"; display: table; }
.clearfix:after { clear: both; }
.fn-left, .fn-right { display: inline; }
.fn-left { float: left; }
.fn-right { float: right; }


/* 页面部分 */
*{font-family:"Microsoft YaHei","微软雅黑","宋体";}
body{ background:#ccc; color:#000; overflow:hidden;}
a{ color:#fff;}
video{ background:#000;}

.wrap{ width:100%; height:100%; overflow:hidden; position:relative; z-index:1;}

#hand{ position:fixed; left:50%; bottom:16%; margin-left:-3.125%; width:6.25%; z-index:3; pointer-events:none;}
#hand img{ width:100%;}

#link{width:90%; padding:0px 5%; height:24px; border-top:1px solid #c2c2c2; background:#ededed; position: fixed; left:0px; bottom:50px; z-index:99;}
#link li{ line-height:24px; font-size:1em;}
#link li a{ color:#89725a; text-decoration:underline;}

#testbar{ width:100%; border-top:1px solid #c2c2c2; position: fixed; left:0px; bottom:50px; z-index:99; display:none;}
#testbar img{ width:100%;}


#loadBox{ position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50)\9; z-index:20;}
#loadBox p{ width:40px; height:40px; background:url(../images/common/loading.gif) no-repeat; background-size:contain; line-height:40px; font-size:10px; text-align:center; color:#fff; text-shadow:1px 1px 1px #333; position:absolute; left:50%; top:50%; margin-left:-20px; margin-top:-20px;}


.main{ position:absolute; left:0; top:0px; width:100%; z-index:1;}
.main .pages{ position:relative; width:100%; overflow:hidden;}



/* 产品亮点 css*/
.prdu a.btnView{ position:absolute; left:50%; bottom:11%; margin-left:-14%; width:28%;}
.prdu a.btnView img{ width:100%;}
.prdu img.slog{ position:absolute; left:50%; top:15%;}
.prdu img.slog1{ width:68%; margin-left:-34%; top:11%;}
.prdu img.slog2{ width:84%; margin-left:-42%;}
.prdu img.slog3{ width:84%; margin-left:-42%;}
.prdu img.slog4{ width:84%; margin-left:-42%;}
.prdu img.slog5{ width:84%; margin-left:-42%;}
.prdu img.slog6{ width:84%; margin-left:-42%;}

.focusPoint{ width:100%; height:100%; position: fixed; left:0; top:0; background:#191919; z-index:999; display:none;}
.focusPoint .boxBtnL{position:absolute; left:15px; top:32%; width:10%; height:15%; background: url(../images/common/ar1.png) left center no-repeat; background-size:contain; display:none;}
.focusPoint .boxBtnL.active{cursor:pointer; display:block;}
.focusPoint .boxBtnR{position:absolute; right:15px; top:32%; width:10%; height:15%; background: url(../images/common/ar2.png) right center no-repeat; background-size:contain; display:none;}
.focusPoint .boxBtnR.active{cursor:pointer; display:block;}
.focusPoint .boxMask{position:absolute; left:0px; top:0px; overflow:hidden;}
.focusPoint .boxMask ul{ position:absolute;}
.focusPoint .boxMask ul li{float:left; display:inline-block; overflow-x:hidden; overflow-y:auto;}
.focusPoint .boxMask ul li img{ width:100%;}
.focusPoint .boxMask ul li img:first-child{ margin-top:10%; margin-bottom:5px;}
.focusPoint a.close{position:absolute; right:0px; top:0px; width:10%; height:10%; background: url(../images/common2/close.png) right top no-repeat; background-size:contain;}



/* 弹窗 css*/
.popBox{position:fixed; left:0px; top:0px; z-index:999;}
.popBox .popMask {display:block;  background:#000\9; filter:alpha(opacity=50)\9; background:rgba(0,0,0,0.5);}

.popPoint{ width:100%; height:100%; background:#000; position:absolute; display:none;}
.popPoint .close{ position:absolute; right:20px; top:20px; width:45px; height:49px; background: url(../images/common2/close.png) center center no-repeat; background-size:contain; overflow:hidden; cursor:pointer;}

.popPic{ width:790px; height:560px; background:#fff; position:absolute; box-shadow:0px 0px 10px #333; display:none;}
.popPic p{}
.popPic p img{ width:790px; height:560px;}
.popPic .close{ position:absolute; right:0px; top:0px; width:32px; height:32px; background: url(../images/common2/close.png) center center no-repeat; background-size:contain; overflow:hidden; cursor:pointer;}

.popLoad{ width:100%; height:100%; left:0; top:0; opacity:0.5; background:#000; position:fixed; z-index:9999; display:none;}
.popLoad p{position:absolute; left:50%; top:50%; margin-left:-15px; margin-top:-15px; width:30px; height:30px; background:url(../images/iphone/loading.gif) center center no-repeat; background-size:contain; line-height:30px; text-align:center; color:#000;  font-size:0.5em; }


.popVideo{ width:100%; height:100%; background:#000; position:fixed; left:0; top:0; display:none; z-index:999;}
.popVideo .close{ position:absolute; right:20px; top:20px; width:70px; height:70px; background: url(../images/common2/close.png) center center no-repeat; overflow:hidden; cursor:pointer;}
#videoBox{ width:100%; height:100%;}

.popIpad{width:100%; height:100%; background:#000; position:fixed; left:0; top:0; display:none; z-index:999;}
.popIpad .video{ width:100%; height:84%; margin:8% auto;}
.popIpad .video video{ width:100%; height:100%;}
.popIpad .close{position:absolute; right:20px; top:20px; width:30px; height:30px; background: url(../images/common/close.png) center center no-repeat; background-size:contain; display:block; z-index:99;}

#turnBox{ width:100%; height:100%; background:#131313; position:fixed; left:0; top:0; z-index:99999; display:none; opacity:0.8;}
#turnBox span{ position:absolute; display:block; left:50%; top:50%; margin-left:-100px; margin-top:-69px; width:200px; height:138px;}

.page0 { z-index:5; width:100%;}
.page1 {z-index:6; width:100%;}
.page2 {z-index:7; width:100%;}
.page3 {z-index:8; width:100%;}
.page4 {background-size:100% auto; z-index:9; width:100%;}
.page5 {background-size:100% auto; z-index:10; width:100%;}
.page6 {z-index:11; width:100%;}

img { width:100%;}




.down_ic{width: 100%;left: 0px;bottom:10%;position: fixed;z-index: 50;}
.down_ic .ya_img{width: 10.6%;margin: 0 auto;position: relative;}
.down_ic .ya_img img{position: absolute;left:0px;
    animation:yada 2s infinite;
    -moz-animation:yada 2s infinite; /* Firefox */
    -webkit-animation:yada 2s infinite; /* Safari and Chrome */
}

@keyframes yada
{
    0%   {top: -55px;}
    50% {top: -35px;}
    100%   {top: -55px;}
}
@-moz-keyframes yada /* Firefox */
{
    0%   {top: -55px;}
    50% {top: -35px;}
    100%   {top: -55px;}
}

@-webkit-keyframes yada /* Safari and Chrome */
{
    0%   {top: -55px;}
    50% {top: -35px;}
    100%   {top: -55px;}
}

.page1 .next {
    position: absolute;
    bottom: 4%;
    right: 240px;
    width: 24px;
    height: 37px;
    animation:nextanmep1 2s infinite;
    -moz-animation:nextanmep1 2s infinite; /* Firefox */
    -webkit-animation:nextanmep1 2s infinite; /* Safari and Chrome */
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); 	/* IE 9 */
    -moz-transform:rotate(180deg); 	/* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg); 	/* Opera */
}

.page1 .prev {
    position: absolute;
    bottom: 4%;
    left: 240px;
    width: 24px;
    height: 37px;
    animation:prevanmep1 2s infinite;
    -moz-animation:prevanmep1 2s infinite; /* Firefox */
    -webkit-animation:prevanmep1 2s infinite; /* Safari and Chrome */
}
@keyframes nextanmep1
{
    0%   {right: 230px;}
    50%   {right: 240px;}
    100%   {right: 230px;}
}
@-moz-keyframes nextanmep1 /* Firefox */
{
    0%   {right: 230px;}
    50%   {right: 240px;}
    100%   {right: 230px;}
}

@-webkit-keyframes nextanmep1 /* Safari and Chrome */
{
    0%   {right: 230px;}
    50%   {right: 240px;}
    100%   {right: 230px;}
}
@keyframes prevanmep1
{
    0%   {left: 230px;}
    50%   {left: 240px;}
    100%   {left: 230px;}
}
@-moz-keyframes prevanmep1 /* Firefox */
{
    0%   {left: 230px;}
    50%   {left: 240px;}
    100%   {left: 230px;}
}

@-webkit-keyframes prevanmep1 /* Safari and Chrome */
{
    0%   {left: 230px;}
    50%   {left: 240px;}
    100%   {left: 230px;}
}




.page3 .next {
    position: absolute;
    top: 148px;
    right: 0px;
    width: 76px;
    height: 70px;
}

.page3 .prev {
    position: absolute;
    top: 148px;
    left: 0px;
    width: 76px;
    height: 70px;
}
.page5 .next {
    position: absolute;
    top: 148px;
    right: 0px;
    width: 76px;
    height: 70px;
}

.page5 .prev {
    position: absolute;
    top: 148px;
    left: 0px;
    width: 76px;
    height: 70px;
}


.mainkv{
    left: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 100%;
    height: 321px;
}
.mainkv2,.mainkv3{
    left: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 100%;
    height: 355px;
}
.config_kv{
    left: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 100%;
    height: 500px;
}
.mainkv .slider {
    width: 100%;
    height: 255px;
}

.mainkv .slider .item {
    float: left;
    width: 100%;
    height: 255px;
    padding: 0;
}
.iosSliderButtons {
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    height: 10px;
}
.mainkv .center_area{
    width: 60px;
    height: 100%;
    left: 290px;
    position: absolute;
}
.mainkv2 .center_area{
    width: 105px;
    height: 100%;
    left: 267px;
    position: absolute;
}
.mainkv3 .center_area{
    width: 215px;
    height: 100%;
    left: 212px;
    position: absolute;
}
.config_kv .center_area{
    width: 40px;
    height: 100%;
    left: 300px;
    position: absolute;
}
.center_area .button {
    float: left;
    width: 10px;
    height: 10px;
    background: #706441;
    margin-right: 10px;
    border: 1px solid #706441;
    -moz-border-radius: 7px;      /* Gecko browsers */
    -webkit-border-radius: 7px;   /* Webkit browsers */
    border-radius:7px;            /* W3C syntax */
}
.center_area .button.last{margin-right: 0px!important;}
.iosSliderButtons .selected {
    background: #fff;
    opacity: 1;
    border: 1px solid #fff;
    -moz-border-radius: 7px;      /* Gecko browsers */
    -webkit-border-radius: 7px;   /* Webkit browsers */
    border-radius:7px;            /* W3C syntax */
}



.pg_bg{position: absolute;left: 0px;top:0px;z-index: -1;}
.top_menu{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
    width: 100%;
    height: 10.9%;
}
.top_menu_bg{
    width: 100%;
    height: 100%;
}
.top_menu_left{
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
}
.top_menu_right{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 10;
}
.top_menu_right a{width: 100%;height: 100%;display: block;}
.bottom_menu{
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 9;
    width: 100%;
    height: 6.9%;
}
.bottom_menu_bg{
    width: 100%;
    height: 100%;
}
.bottom_menu_l{
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
}
.bottom_menu_r{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.bottom_menu_l a,.bottom_menu_r a{width:100%;height: 100%;display: block;}
.black_bg{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 115;
    background: url("../images/fc_bg.png") repeat;
}
.munepg{
    display: none;
}
.close_ar{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.menu_main_area{
    width: 100%;
    position: absolute;
    left: 0px;
    top: 24%;
}
.menu_ar{
    width: 53%;
    margin: 0 auto;
}
.menu_ar ul li{
    width: 100%;
    border-bottom: 1px #3b3b3b solid;
    padding: 25px 0;
    text-align: center;
    color: #a3a3a3;
    font-size: 30px;
}
.menu_ar ul li a{
    color: #a3a3a3;
    font-size: 30px;
}
.menu_ar ul li.index_color{color: #c3b194;}
.menu_ar ul li.last_line{border: 0px;}


.pg1_title{width: 100%;margin-top: 150px;}
.pg2_title{width: 100%;margin-top: 150px;}


.video_main_area {
    width: 100%;
    margin: 0 auto;
    display:none;
}
.form_ar{
    width: 399px;
    margin: 15px auto;
}
.hrcg{margin-bottom: 15px;}
.hrcip{margin-bottom: 20px;}
.form_text{
    color: #000;
    font-size: 24px;
}
.name_input_area{width: 100%;height: 34px;}
.name_input_area input{width: 96%;height: 98%;padding: 1% 2%;font-size: 22px;}
.mobile_input_area{width: 100%;height: 34px;}
.mobile_input_area input{width: 96%;height: 98%;padding: 1% 2%;font-size: 22px;}
.jxs_lmr{width: 126.2px;margin-right: 10px;float: left;}
.jxs_lmr.last{margin-right: 0px;}
.form_ar select{width: 100%;height: 34px;font-size: 22px;}
.jxs_area2{width: 100%;height: 34px;}
.jxs_area2 select{width: 100%;height: 34px;font-size: 22px;}


.new_ar{
    width: 440px;
    margin: 0 auto;
}
.new_ar ul li{
    width: 100%;
    padding: 25px 0;
    border-bottom: 1px #000 solid;
}
.new_ar ul li a{
    color: #000;
    text-decoration: none;
    font-size: 24px;
    text-align: center;
    display: block;
}
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
    .page0 img{margin-top: -100px;}
    .down_ic{width: 100%;left: 0px;bottom:2%;position: fixed;z-index: 50;}
}
/*media*/
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 641px) {

}
@media screen and (max-width: 481px) {

}
@media screen and (max-width: 415px) {

}
@media screen and (max-width: 376px) {

}
@media screen and (max-width: 361px) {

}
@media screen and (max-width: 321px) {

}
/* iphone4 */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){

}

/* iphone5 */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){

}
/* note */
@media screen and (device-width: 400px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2){

}



